<template>
	<view>
		<view class=""  v-show="bottomTabbarVal == 0">
			<uni-nav-bar
				:statusBar="true"
				:fixed="true"
				 left-icon="left"
				 @clickLeft="back">
					<view class="dk-title">
						<view>{{formatFactory(factory)}}</view>
					</view>
			</uni-nav-bar>
			<view class="dk-card1">
				<view class="dk-card1-user">
					<view class="dk-card1-user__avator" v-if="avator">
						<image :src="avator" mode="" @error="onErrorImg"></image>
					</view>
					<view class="dk-card1-user__avator" v-else>{{formatName(username)}}</view>
					<view class="dk-card1-user__info">
						<view class="dk-card1-user__info-top">{{username}}</view>
						<view class="dk-card1-user__info-bottom">{{userInfo.deptName}}</view>
					</view>
				</view>
			</view>
			<view class="dk-card">
				<view class="dk-card-box dk-card-front" :style="{'transform': unDing}">
					<view class="dk-card-front__head">
						<view class="dk-card-front__head--item">
							<view class="dk-card-front__head--item-top">
								<text>上班</text>
								<text>{{userAttend.GoWorkTimeLate}}</text>
							</view>
							<view class="dk-card-front__head--item-bottom" v-if="isGoWork">
								<view class="dk-card-front__head--item-bottom-icon">
									<image src="@/static/theme/default/home/checked.png" mode=""></image>
								</view>
								<view class="">
									<text>{{userAttend.todayGoFaceTime}}</text>
									<text>已打卡</text>
								</view>
							</view>
							<view class="dk-card-front__head--item-bottom" v-else>
								<text>未打卡</text>
							</view>
						</view>
						<view class="dk-card-front__head--item">
							<view class="dk-card-front__head--item-top">
								<text>下班</text>
								<text>{{userAttend.LeaveWorkTimeLate}}</text>
							</view>
							<view class="dk-card-front__head--item-bottom" v-if="isLeaveWork">
								<view class="dk-card-front__head--item-bottom-icon">
									<image src="@/static/theme/default/home/checked.png" mode=""></image>
								</view>
								<view class="">
									<text>{{userAttend.todayLeaveFaceTime}}</text>
									<text>已打卡</text>
								</view>
							</view>
							<view class="dk-card-front__head--item-bottom" v-else>
								<text>未打卡</text>
							</view>
						</view>
					</view>
					<view class="dk-card-front__body">
						<view class="dk-card-front__body--btn" :style="{'background-color': dkColor}" @click="dingTap">
							<view class="dk-card-front__body--btn-box">
								<view class="dk-card-front__body--btn-box-icon">
									<image src="@/static/theme/default/home/xj.png" mode=""></image>
								</view>
								<view class="dk-card-front__body--btn-box-top">{{dkText}}</view>
								<view class="dk-card-front__body-btn-box-bottom">{{currentTime}}</view>
							</view>
						</view>
						<view class="dk-card-front__body--des" v-if="wqStatus == 0">
							<view class="dk-card-front__body--des-icon">
								<image src="@/static/theme/default/home/checked_green.png" mode=""></image>
							</view>
							<view class="dk-card-front__body--des-text">
								<text>已进入考勤范围：</text>
								<text>{{comPosition.aname}}</text>
							</view>
						</view>
						<view class="dk-card-front__body--des" v-else-if="wqStatus == -1">
							<view class="dk-card-front__body--des-icon">
								<image src="@/static/theme/default/home/jinggao.png" mode=""></image>
							</view>
							<view class="dk-card-front__body--des-text">
								<text>未获取到定位</text>
							</view>
						</view>
						<view class="dk-card-front__body--des" v-else>
							<view class="dk-card-front__body--des-icon">
								<image src="@/static/theme/default/home/jinggao.png" mode=""></image>
							</view>
							<view class="dk-card-front__body--des-text">
								<text>当前不在考勤范围内</text>
							</view>
						</view>
					</view>
				</view>
				<view class="dk-card-box dk-card-back" :style="{'transform': ding}">
					<view class="dk-card-back__head">
						<view class="dk-card-back__head-text">
							<text v-show="dkStatus == 1">上班</text>
							<text v-show="dkStatus == 2">迟到</text>
							<text v-show="dkStatus == 3">早退</text>
							<text v-show="dkStatus == 4">下班</text>
							<text>打卡成功</text>
						</view>
						<view class="dk-card-back__head-time">
							<text>打卡时间</text>
							<text v-show="dkStatus == 1 || dkStatus == 2">{{userAttend.todayGoFaceTime}}</text>
							<text v-show="dkStatus == 4 || dkStatus == 3">{{userAttend.todayLeaveFaceTime}}</text>
						</view>
					</view>
					<view class="dk-card-back__img">
						<image src="@/static/theme/default/home/go-work.png" mode="" v-show="dkStatus == 1 || dkStatus == 2"></image>
						<image src="@/static/theme/default/home/leave-work.png" mode="" v-show="dkStatus == 4 || dkStatus == 3"></image>
					</view>
					<view class="dk-card-back__des">
						<text v-show="dkStatus == 1">调整好心情，开始工作</text>
						<text v-show="dkStatus == 2">调整好心情，开始工作</text>
						<text v-show="dkStatus == 3">工作辛苦了，好好休息</text>
						<text v-show="dkStatus == 4">工作辛苦了，好好休息</text>
					</view>
					<view class="dk-card-back__cancel" @click="isDing = false">
						<image src="@/static/theme/default/home/cancel.png" mode=""></image>
					</view>
				</view>
			</view>
			<!-- #ifdef APP-PLUS -->
			<view class="dk-bottom" v-if="!isOpenGPS" @click="openGps">
				<view class="dk-bottom-tip" hover-class="clickable">
					<view class="dk-bottom-tip-icon">
						<image src="@/static/theme/default/home/danger.png" mode=""></image>
					</view>
					<view class="dk-bottom-tip-text">手机定位服务被关闭，去处理</view>
				</view>
			</view>
			<!-- #endif -->
		</view>
		<view class="" style="padding-bottom: 100rpx;" v-show="bottomTabbarVal == 1">
			<uni-nav-bar
				:statusBar="true"
				:fixed="true">
			    <view class="nav-title" @click="showdatePicker">
			    	<view>{{title}}</view>
			    	<view class="nav-title-icon"><image src="@/static/theme/default/home/xiajiantou.png" mode=""></image></view>
			    </view>
			    <view class="nav-right" slot="right" @click="backToday">今</view>
			</uni-nav-bar>
			<u-datetime-picker
					:show="datePickerVisible"
					v-model="datePickerVal"
					mode="year-month"
					closeOnClickOverlay
					@close="datePickerVisible=false"
					cancelText=""
					@confirm="confirmDatePickerVal"
			></u-datetime-picker>
			<view class="card">
				<view class="card__head" hover-class="clickable" @click="goAttendTotal">
					<view class="" style="font-size: 34rpx;">{{month}}月汇总</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="card__content">
					<view class="">
						<view class="card__content--val">{{total.AttendMinutes ? (total.AttendMinutes/60).toFixed(2) : ''}}</view>
						<view class="card__content--des">工时(小时)</view>
					</view>
					<view class="">
						<view class="card__content--val">{{total.LateCount}}</view>
						<view class="card__content--des">迟到</view>
					</view>
					<view class="">
						<view class="card__content--val">{{total.EarlyCount}}</view>
						<view class="card__content--des">早退</view>
					</view>
				</view>
			</view>
			<view class="card">
				<view class="" style="padding: 20rpx;">
					<view class="tip__card">
						<view class="tip__card--list">
							<view class="tip__card--list-dot" style="background-color: #3C9CFF;"></view>
							<view class="tip__card--list-text">全天考勤正常</view>
						</view>
						<view class="tip__card--list">
							<view class="tip__card--list-dot" style="background-color: #F9AE3D;"></view>
							<view class="tip__card--list-text">当天存在异常：迟到、早退、缺卡</view>
						</view>
						<view class="tip__card--list">
							<view class="tip__card--list-dot" style="background-color: #8c8c8c;"></view>
							<view class="tip__card--list-text">当天提交过：请假、加班、出差、补卡申请</view>
						</view>
					</view>
					<zzx-calendar ref="zzx_calendar" :dotList="dotList" :dotStyle="{background: '#3C9CFF'}" @selected-change="changeDate" @days-change="daysChange"></zzx-calendar>
					<view class="content">
						<view class="content__des">
							<text class="">规则：</text>
							<text class="" v-if="day.goWorkTime && day.leaveWorkTime">
								<text class="" style="margin-right: 10rpx;">{{day.AttendName}}</text>
								<text class="">{{day.goWorkTime}}-{{day.leaveWorkTime}}</text>
							</text>
							<text v-else>休息</text>
						</view>
						<view class="attend-box" v-if="day && day.attend && day.attend.length">
							<view class="attend-card" v-for="item in day.attend" @click="goProcessDetail(item)">
								<view class="attend-card__left">
									<view class="" style="font-weight: bold;">
										{{item.TypeName}}
									</view>
								</view>
								<view class="attend-card__right" style="color: #aaa;">
									{{item.start}} / {{item.end}}
								</view>
							</view>
						</view>
						<view class="content__body">
							<view class="no-work" v-if="day.minuteDiff < 0">
								未到打卡日期
							</view>
							<view class="" style="position: relative;" v-else-if="day.GoWorkState || day.LeaveWorkState">
								<view class="line" v-if="day.GoWorkState && day.LeaveWorkState"></view>
								<view class="morning" v-if="day.GoWorkState">
									<view class="">上班</view>
									<view v-show="day.GoFaceTime">{{day.GoFaceTime}}</view>
									<u-tag class="custom-tag" plain :text="day.GoWorkState" :borderColor="day.goColor" :color="day.goColor" size="mini"> </u-tag>
									<view class="right-btn" v-show="day.GoWorkState == '未打卡'" @click="goAddAttendPage(day.GoWorkTime)">去补卡</view>
								</view>
								<view class="afternoon" v-if="day.LeaveWorkState">
									<view class="">下班</view>
									<view v-show="day.LeaveFaceTime">{{day.LeaveFaceTime}}</view>
									<u-tag class="custom-tag" plain :text="day.LeaveWorkState" :borderColor="day.leaveColor" :color="day.leaveColor" size="mini"> </u-tag>
									<view class="right-btn" v-show="day.LeaveWorkState == '未打卡'" @click="goAddAttendPage(day.LeaveWorkTime)">去补卡</view>
								</view>
							</view>
							<view class="no-work" v-else>
								好好休息
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		
		<!-- 底部导航栏 -->
		<u-tabbar
			:value="bottomTabbarVal"
			@change="bottomTabbarChange"
			:fixed="true"
			:placeholder="false"
			:safeAreaInsetBottom="false"
		>
			<u-tabbar-item text="打卡" :icon="dkIcon"></u-tabbar-item>
			<u-tabbar-item text="统计" :icon="tjIcon"></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	import moment from 'moment'
	import _custom from '../../../../common/_custom.js'
	import _data from '../../../../common/_data.js'
	import {uploadImages,enumerateDaysBetweenDates,isDuringDate} from '@/common/custom_util.js'
	import permision from "@/plugins/js_sdk/wa-permission/permission.js"
	
	var x_PI = 3.14159265358979324 * 3000.0 / 180.0;
	var PI = 3.1415926535897932384626;
	var a = 6378245.0;
	var ee = 0.00669342162296594323;
	
	export default {
		data() {
			return {
				barHeight: 0,
				day: {},
				username: _data.localData('name'),
				title: '',
				datePickerVisible: false,
				datePickerVal: Number(new Date()),
				date: moment().format('YYYY-MM-DD'),
				dotList: [],
				total: {},
				month: moment().month() + 1,
				bottomTabbarVal: 0,
				tabbarIcon: ['/static/theme/default/home/kaoqin_daka_black.png','/static/theme/default/home/kaoqin_daka_blue.png','/static/theme/default/home/kaoqin_tongji_black.png','/static/theme/default/home/kaoqin_tongji_blue.png'],
				dkIcon: '/static/theme/default/home/kaoqin_daka_blue.png',
				tjIcon: '/static/theme/default/home/kaoqin_tongji_black.png',
				isGoWork: false,//上班是否打卡
				isLeaveWork: false,//下班是否打卡
				isOpenGPS: false,//是否开启定位
				userAttend: {},//当前用户考勤数据
				dkText: '无法打卡',//打卡文本
				comPosition: {},//打卡地点信息
				isWorkAttend: false,//是否有排班数据
				pbStatus: 0,//排班状态 0：无排班，1：有排班
				wqStatus: -1,//外勤状态 -1：未知，0：无外勤，1：外勤
				dkStatus: 0,//打卡状态 0：不在打卡时段，1：正常上班，2：迟到，3：早退，4：正常下班
				dkColor: '#B1B7C5',//打卡按钮背景颜色
				isDing: false,//是否打卡成功
				unDing: '',//控制卡片翻转
				ding: '',//控制卡片翻转
				disabled: true,//是否禁用打卡
				currentTime: '',
				timer: null,
				userInfo: {},//用户信息
				avator: '',
				factory: _data.localData('obsname'),
				user_info: _data.data('user_info'),
				address: '',
				distance: 0,
				count: 0
			}
		},
		onLoad() {
			if(this.user_info.photo.indexOf('default') != 0) {
				this.avator = _data.staticPhoto() + this.user_info.photo;
			}
			this.timer = setInterval(() => {
				this.currentTime = moment().format('HH:mm:ss')
			},1000)
			this.setNavBarTitle()
			this.getCalendarData()
			this.getWorkAttendUserReport()
			this.getUserInfo()
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({
				success: function(e) {
					// #ifndef MP  
					if (e.platform == 'android') {
						that.barHeight = e.statusBarHeight + 50
					} else {
						that.barHeight = e.statusBarHeight + 45
					}
					// #endif
				}
			})
		},
		onShow() {
			// #ifndef H5
			if(this.count == 0) {
				this.checkOpenGPSService().then(() => {
					if(this.isOpenGPS) {
						if(this.comPosition.aname) {
							this.getLocation()
						} else {
							this.getGpsInfo()
						}
					}
				})
				this.count++;
			}
			// #endif
		},
		onUnload() {
			clearInterval(this.timer)
		},
		watch: {
			isDing() {
				if(this.isDing) {
					this.unDing = 'rotateY(180deg)';
					this.ding = 'rotateY(0deg)';
				} else {
					this.unDing = 'rotateY(0deg)';
					this.ding = 'rotateY(-180deg)';
				}
			},
		},
		methods: {
			/**
			 * 跳转到流程详情页面
			 * @param {Object} v  当前流程数据
			 */
			goProcessDetail(v) {
				uni.navigateTo({
					url: '../' + v.FlowRouter + '/index?data=' + JSON.stringify(v) //data必填字段CreateTime、InsFlowId
				})
			},
			/**
			 * 获取定位信息
			 */
			getGpsInfo() {
				this.getCompanyInfo().then((res) => {
					this.getLocation(res)
				})
			},
			/**
			 * 获取定位
			 */
			getLocation() {
				// #ifdef APP-PLUS
				let that = this;
				let factoryLat = this.comPosition.blat*1;
				let factoryLog = this.comPosition.bLng*1;
				let company = this.comPosition.aname;
				let platform = uni.getSystemInfoSync().platform;
				if(platform == 'ios'){
					uni.getLocation({
						type: 'wgs84',//ios需 为wgs84
						geocode: true,
						isHighAccuracy: true,
						highAccuracyExpireTime: 3100,
						success: function (res) {
							let address = '';
							let gcj02Point = that.wgs84togcj02(res.longitude,res.latitude);
							let bd09Point = that.gcj02tobd09(gcj02Point.longitude,gcj02Point.latitude);
							let distance = that.GetDistance(bd09Point.latitude,bd09Point.longitude,factoryLat,factoryLog);
							that.distance = (distance*1).toFixed(0)
							if(that.distance > 1000) {//外勤
								address = res.address.city + res.address.district + res.address.street
								that.wqStatus = 1;
							} else {
								address = company;
								that.wqStatus = 0;
							}
							that.address = bd09Point.longitude + ',' + bd09Point.latitude + ',' + address;
							that.getDkData();
						},
						fail(e) {
							that.wqStatus = -1;
							uni.showToast({
								title: '获取定位失败',
								icon: 'none'
							})
						}
					});
				} else if(platform == 'android'){
					uni.getLocation({
						type: 'gcj02',//安卓需指定 type 为 gcj02 并配置三方定位SDK
						geocode: true,
						isHighAccuracy: true,
						highAccuracyExpireTime: 3100,
						success: function (res) {
							let address = '';
							let bd09Point = that.gcj02tobd09(res.longitude,res.latitude);
							that.address = bd09Point.longitude + ',' + bd09Point.latitude + ',' + address;
							let distance = that.GetDistance(bd09Point.latitude,bd09Point.longitude,factoryLat,factoryLog);
							that.distance = (distance*1).toFixed(0)
							if(that.distance > 1000) {//外勤
								address = res.address.city + res.address.district + res.address.street
								that.wqStatus = 1;
							} else {
								address = company;
								that.wqStatus = 0;
							}
							that.address = bd09Point.longitude + ',' + bd09Point.latitude + ',' + address;
							that.getDkData();
						},
						fail(e) {
							that.wqStatus = -1;
							uni.showToast({
								title: '获取定位失败',
								icon: 'none'
							})
						}
					});
				}
				// #endif
			},
			/**
			 * 获取当前用户公司/水厂的定位
			 */
			getCompanyInfo() {
				let that = this;
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'getCompanyInfo',
						success(result) {
							if(result.length) {
								that.comPosition = result[0];
								if(that.comPosition.blat && that.comPosition.bLng) {
									resolve()
								} else {
									uni.showToast({
										title: '未设置考勤地点经纬度，请联系管理员',
										icon: 'none'
									})
									reject()
								}
							}
						},
						fail() {
							uni.showToast({
								title: '当前网络不稳定，请检查网络连接',
								icon: 'none'
							})
							reject()
						}
					})
				})
			},
			/**
			 * 获取用户信息
			 */
			getUserInfo() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getUserInfo',
					apiparam: {
						obsusername: this.username
					},
					success(res) {
						if(res.length) {
							that.userInfo = res[0]
						}
					}
				})
			},
			/**
			 * 获取每月考勤数据
			 */
			getWorkAttendDayState() {
				return new Promise(resolve => {
					_custom.getDataJava({
						apiname: 'getWorkAttendUserDayState',
						apiparam: {
							startdate: moment(this.date).startOf('month').format("YYYY-MM-DD"),
							enddate: moment(this.date).endOf('month').format("YYYY-MM-DD"),
							obsusername: this.username,
							
							//临时参数
							// startdate: moment(this.date).startOf('month').format("YYYY-MM-DD"),
							// enddate: moment(this.date).endOf('month').format("YYYY-MM-DD"),
							// obsusername: '刘廷永',
							// obscode: 'SN1'
							
						},
						success(res) {
							resolve(res)
						}
					})
				})
			},
			getUserOtherAttendDataInMonth() {
				
				return new Promise(resolve => {
					_custom.getDataJava({
						apiname: 'getUserOtherAttendDataInMonth',
						apiparam: {
							month1: moment(this.date).startOf('month').format("YYYY-MM"),
							month2: moment(this.date).endOf('month').format("YYYY-MM"),
							obsusername: this.username,
							
							//临时参数
							// month1: moment(this.date).startOf('month').format("YYYY-MM"),
							// month2: moment(this.date).endOf('month').format("YYYY-MM"),
							// obsusername: '刘廷永',
							// obscode: 'SN1'
						},
						success(res) {
							resolve(res)
						}
					})
				})
			},
			/**
			 * 获取月份汇总数据
			 */
			getWorkAttendUserReport() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getWorkAttendUserReport',
					apiparam: {
						startdate: moment(this.date).startOf('month'),
						enddate: moment(this.date).endOf('month'),
						obsusername: this.username,
						
						//临时参数
						// startdate: '2023-02-01',
						// enddate: '2023-02-28',
						// obsusername: '刘廷永',
						// obscode: 'SN1'
						
						
						
					},
					success(res) {
						that.total = res.length ? res[0] : {}
					}
				})
			},
			/**
			 * 获取今天的数据
			 */
			getToday() {
				this.day = {}
				this.list.forEach(item => {
					if(item.date == this.date) {
						this.day = item
					}
				})
				if(this.day.attend) {
					this.day.attend.forEach(item => {
						item.start = moment(item.StartTime).format('MM-DD hh:mm')
						item.end = moment(item.EndTime).format('MM-DD hh:mm')
					})
				}
			},
			/**
			 * 获取日历相关数据
			 */
			getCalendarData() {
				Promise.all([this.getWorkAttendDayState(),this.getUserOtherAttendDataInMonth()]).then(res => {
					let start = moment(this.date).startOf('month').format("YYYY-MM-DD")
					let end = moment(this.date).endOf('month').format("YYYY-MM-DD")
					let dateList = enumerateDaysBetweenDates(start,end);
					let resultList1 = res[0];
					let resultList2 = res[1];
					let list = [];
					dateList.forEach(item => {
						let flag1 = false;
						let obj1 = {}
						resultList1.forEach(v => {
							let date = moment(v.YearDate).format("YYYY-MM-DD")
							if(item == date) {
								flag1 = true
								obj1 = v
							}
						})
						let arr = [];
						resultList2.forEach(v => {
							let s = moment(v.StartTime).format("YYYY-MM-DD")
							let e = moment(v.EndTime).format("YYYY-MM-DD")
							if(isDuringDate(s,e,item)) {
								arr.push(v)
							}
						})
						list.push({
							...obj1,
							attend: arr,
							date: item,
						})
					})
					let temp = [];
					list.forEach(item => {
						let dayDiff = moment().diff(item.date,'day');
						let minuteDiff = moment().diff(item.date,'minute');
						if(dayDiff > 0) {//今天之前
							let colors = [];
							if(item.GoWorkState == '正常' && item.LeaveWorkState == '正常') {
								colors.push('#3C9CFF')
							}
							if(item.LeaveWorkState == '未打卡' || 
								item.LeaveWorkState == '迟到' || 
								item.LeaveWorkState == '早退' || 
								item.GoWorkState == '未打卡' || 
								item.GoWorkState == '迟到' || 
								item.GoWorkState == '早退') {
								colors.push('#F9AE3D')
							}
							if(item.attend.length) {
								colors.push('#8c8c8c')
							}
							temp.push({
								date: item.date,
								colors,
							})
						}
						item.dayDiff = dayDiff
						item.minuteDiff = minuteDiff
						item.goWorkTime = this.formateHourMin(item.GoWorkTime)
						item.leaveWorkTime = this.formateHourMin(item.LeaveWorkTime)
						item.GoFaceTime = this.formateHourMin(item.GoFaceTime)
						item.LeaveFaceTime = this.formateHourMin(item.LeaveFaceTime)
						if(item.GoWorkState == '未打卡') {
							item.goColor = '#F56C6C'
						}
						if(item.LeaveWorkState == '未打卡') {
							item.leaveColor = '#F56C6C'
						}
						if(item.GoWorkState == '迟到') {
							item.goColor = '#F9AE3D'
						}
						if(item.LeaveWorkState == '早退') {
							item.leaveColor = '#F9AE3D'
						}
						if(item.GoWorkState == '正常') {
							item.goColor = '#3C9CFF'
						}
						if(item.LeaveWorkState == '正常') {
							item.leaveColor = '#3C9CFF'
						}
					})
					this.list = list;
					this.dotList = temp;
					this.getToday();
				})
			},
			/**
			 * 点击日历中的某天
			 * @param {Object} v 回调参数
			 */
			changeDate(v) {
				this.date = v.fullDate;
				this.getToday();
			},
			/**
			 * 日历左右切换事件
			 * @param {Object} v 回调参数
			 */
			daysChange(v) {
				if(v.type == 'swiper') {
					this.date = moment(v.start).format('YYYY-MM-DD')
					this.$refs.zzx_calendar.clickItem({
						fullDate: this.date
					})
					this.getCalendarData()
					this.setNavBarTitle()
				}
			},
			/**
			 * 设置标题日期
			 */
			setNavBarTitle() {
				this.title = moment(this.date).format('YYYY.MM');
				this.datePickerVal = Number(new Date(this.date));
			},
			/**
			 * 点击月份弹窗确认按钮
			 * @param {Object} e 回调参数
			 */
			confirmDatePickerVal(e) {
				this.date = moment(e.value).format('YYYY-MM-DD')
				this.getCalendarData()
				this.setNavBarTitle()
				this.$refs.zzx_calendar.initDate(this.date)
				this.$refs.zzx_calendar.clickItem({
					fullDate: this.date
				})
				this.datePickerVisible = false;
			},
			/**
			 * 返回今天
			 */
			backToday() {
				this.date = moment().format('YYYY-MM-DD')
				this.getWorkAttendDayState()
				this.setNavBarTitle()
				this.$refs.zzx_calendar.initDate(this.date)
				this.$refs.zzx_calendar.clickItem({
					fullDate: this.date
				})
			},
			/**
			 * 点击导航栏日期
			 */
			showdatePicker() {
				this.datePickerVal = Number(new Date(this.date));
				this.datePickerVisible = true;
			},
			/**
			 * 格式化导航栏日期
			 */
			formateHourMin(v) {
				return v ? moment(v).format('HH:mm') : ''
			},
			/**
			 * 跳转月份汇总页面
			 */
			goAttendTotal() {
				uni.navigateTo({
					url: './total'
				})
			},
			/**
			 * 点击打卡按钮
			 */
			async dingTap() {
				let that = this;
				if(!this.disabled) {
					await that.checkOpenGPSService();
					that.setDKStatus();
					if(!that.isOpenGPS) {
						return
					}
					uploadImages({ 
						sourceType: ['camera']
					},res => {
						uni.hideLoading();
						_custom.getDataJava({
							apiname: 'addWorkAttendNow',
							code: 3,
							apiparam: {
								imagepath: res[0].path,
								location: that.address,
								flag: that.wqStatus == 1 ? 4 : 3,
								obsusername: that.username
							},
							success() {
								that.getDkData();
								that.isDing = true;
							},
							fail() {
								uni.showToast({
									title: '打卡失败',
									icon: 'error'
								})
							}
						})
					},err => {
						uni.showToast({
							title: '图片上传失败失败',
							icon: 'error'
						})
					})
				} else {
					uni.showToast({
						title: '当前状态不能打卡',
						icon: 'none'
					})
				}
			},
			/**
			 * 设置打卡状态
			 */
			setDKStatus() {
				if(!this.isOpenGPS || !this.isWorkAttend || this.wqStatus == -1) {
					this.dkText = '无法打卡'
					this.dkColor = '#B1B7C5'
					this.disabled = true;
					return
				}
				switch(this.dkStatus) {
					case 0://不在打卡时段
						this.dkText = '无法打卡'
						this.dkColor = '#B1B7C5'
						this.disabled = true;
						break;
					case 1://正常上班
						if(this.isGoWork) {//已打卡
							this.dkText = '已打卡'
							this.dkColor = '#B1B7C5'
							this.disabled = true;
						} else {
							if(this.wqStatus == 0) {//无外勤
								this.dkText = '上班打卡'
								this.dkColor = '#009EFA'
								this.disabled = false;
							} else {
								this.dkText = '外勤打卡'
								this.dkColor = '#17C087'
								this.disabled = false;
							}
						}
						break;
					case 2://迟到
						if(this.isGoWork) {//已打卡
							this.dkText = '已打卡'
							this.dkColor = '#B1B7C5'
							this.disabled = true;
						} else {
							if(this.wqStatus == 0) {//无外勤
								this.dkText = '迟到打卡'
								this.dkColor = '#F8BC56'
								this.disabled = false;
							} else {
								this.dkText = '外勤打卡'
								this.dkColor = '#17C087'
								this.disabled = false;
							}
						}
						break;
					case 3://早退
						if(this.isLeaveWork) {//已打卡
							this.dkText = '更新打卡'
							this.dkColor = '#F8BC56'
							this.disabled = false;
						} else {
							if(this.wqStatus == 0) {//无外勤
								this.dkText = '早退打卡'
								this.dkColor = '#F8BC56'
								this.disabled = false;
							} else {
								this.dkText = '外勤打卡'
								this.dkColor = '#17C087'
								this.disabled = false;
							}
						}
						break;
					case 4://正常下班
						if(this.isLeaveWork) {//已打卡
							this.dkText = '更新打卡'
							this.dkColor = '#009EFA'
							this.disabled = false;
						} else {
							if(this.wqStatus == 0) {//无外勤
								this.dkText = '下班打卡'
								this.dkColor = '#009EFA'
								this.disabled = false;
							} else {
								this.dkText = '外勤打卡'
								this.dkColor = '#17C087'
								this.disabled = false;
							}
						}
						break;
				}
				
			},
			/**
			 * 获取打卡数据
			 */
			getDkData() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getWorkAttendUserDayState',
					apiparam: {
						startdate: moment().format('YYYY-MM-DD'),
						enddate: moment().format('YYYY-MM-DD'),
						obsusername: that.username,
						isattend: 1
					},
					success(res) {
						if(res.length && res[0].GoWorkTime && res[0].LeaveWorkTime) {
							that.isWorkAttend = true;
							that.pbStatus = 1;
							that.userAttend = res[0];
							that.userAttend.GoWorkTimeLate = that.userAttend.GoWorkTime ? moment(that.userAttend.GoWorkTime).format('HH:mm') : '';//最晚上班时间
							that.userAttend.LeaveWorkTimeLate = that.userAttend.LeaveWorkTime ? moment(that.userAttend.LeaveWorkTime).format('HH:mm') : '';//最晚下班时间
							if(that.userAttend.GoFaceTime || that.userAttend.LateFaceTime) {//上班已打卡
								that.isGoWork = true;
								if(that.userAttend.GoFaceTime) {
									that.userAttend.todayGoFaceTime = moment(that.userAttend.GoFaceTime).format('HH:mm')
								} else if(that.userAttend.LateFaceTime){
									that.userAttend.todayGoFaceTime =moment(that.userAttend.LateFaceTime).format('HH:mm')
								}
							} else {//上班未打卡
								that.isGoWork = false
							}
							if(that.userAttend.LeaveFaceTime || that.userAttend.EarlyFaceTime) {//下班已打卡
								that.isLeaveWork = true
								if(that.userAttend.LeaveFaceTime) {
									that.userAttend.todayLeaveFaceTime = moment(that.userAttend.LeaveFaceTime).format('HH:mm')
								} else if(that.userAttend.EarlyFaceTime){
									that.userAttend.todayLeaveFaceTime = moment(that.userAttend.EarlyFaceTime).format('HH:mm')
								}
							} else {//下班未打卡
								that.isLeaveWork = false
							}
							let goDiff = moment().diff(that.userAttend.GoWorkTime,'second');//计算当前时间与指定上班时间分钟数
							let goDiffL = moment().diff(that.userAttend.GoWorkTimeL,'second');
							let goDiffR = moment().diff(that.userAttend.GoWorkTimeR,'second');
							let leaveDiff = moment().diff(that.userAttend.LeaveWorkTime,'second');
							let leaveDiffL = moment().diff(that.userAttend.LeaveWorkTimeL,'second');
							let leaveDiffR = moment().diff(that.userAttend.LeaveWorkTimeR,'second');
							if(goDiffL >= 0 && goDiff <= 0) {//正常上班
								that.dkStatus = 1
							} else if(goDiff > 0 && goDiffR < 0){//迟到
								that.dkStatus = 2
							} else if(leaveDiffL > 0 && leaveDiff < 0) {//早退
								that.dkStatus = 3
							} else if(leaveDiff >= 0 && leaveDiffR < 0){//正常下班
								that.dkStatus = 4
							} else {
								that.dkStatus = 0
							}	
							that.setDKStatus();
						} else {
							that.isWorkAttend = false;
							setTimeout(() => {
								uni.showToast({
									title: '无排班数据或排班数据不全',
									icon: 'none'
								})
							},500)
						}
					}
				})
			},
			/**
			 * 切换底部导航栏选项时触发
			 */
			bottomTabbarChange(e) {
				this.bottomTabbarVal = e;
				if(e == 0) {
					this.dkIcon = this.tabbarIcon[1];
					this.tjIcon = this.tabbarIcon[2];
				} else {
					this.dkIcon = this.tabbarIcon[0];
					this.tjIcon = this.tabbarIcon[3];
				}
			},
			/**
			 * 打开定位设置
			 */
			openGps() {
				let platform=uni.getSystemInfoSync().platform;
				if(platform=='ios'){
					permision.gotoAppPermissionSetting();
				} else if(platform=='android'){
					var main = plus.android.runtimeMainActivity();
					var Intent = plus.android.importClass('android.content.Intent');
					var Settings = plus.android.importClass('android.provider.Settings');
					var intent = new Intent(Settings.ACTION_LOCATION_SOURCE_SETTINGS);
					main.startActivity(intent); // 打开系统设置定位服务功能页面
				}
				this.count = 0;
			},
			/**
			 * 检查定位权限
			 */
		    async checkOpenGPSService() {
				let that = this;
				let platform=uni.getSystemInfoSync().platform
				if(platform=='ios'){
					let iosPermision = permision.judgeIosPermission("location");
					if(iosPermision) {
						that.isOpenGPS = true;
					} else {
						that.isOpenGPS = false;
					}
				} else if(platform=='android'){
					let persisson = await permision.requestAndroidPermission('android.permission.ACCESS_FINE_LOCATION')
					if(persisson == 1) {
						that.isOpenGPS = true;
					} else if(persisson == 0) {
						that.isOpenGPS = false;
					} else if(persisson == -1) {
						that.isOpenGPS = false;
						uni.showToast({
							title: '被永久拒绝定位权限',
							icon: 'none'
						})
					}
				}
			},
			/**
			 * 跳转到补卡申请页面
			 */
			goAddAttendPage(v) {
				uni.navigateTo({
					url: '/pages/home/child/add-attend-apply/index?datetime=' + v
				})
			},
			/**
			 * 返回上级页面
			 */
			back() {
				uni.navigateBack({})
			},
			/**
			 * 格式化名称
			 * @param {Object} v 名称
			 */
			formatName(v) {
				return v.length > 2 ? v.substring(v.length-2) : v
			},
			/**
			 * 格式化水厂名称
			 * @param {Object} v 名称
			 */
			formatFactory(v) {
				if(v.length > 14) {
					return v.substring(0,12) + '...'
				}
				return v
			},
			/**
			 * 图片加载错误回调
			 */
			onErrorImg() {
				this.avator = ''
			},
			/**
			 * 计算两个经纬度之间距离
			 * @param {Object} lat1 第一个的纬度
			 * @param {Object} lng1 第一个的经度
			 * @param {Object} lat2 第二个的纬度
			 * @param {Object} lng2 第二个的经度
			 */
			GetDistance( lat1,  lng1,  lat2,  lng2){
			    var radLat1 = lat1*Math.PI / 180.0;
			    var radLat2 = lat2*Math.PI / 180.0;
			    var a = radLat1 - radLat2;
			    var  b = lng1*Math.PI / 180.0 - lng2*Math.PI / 180.0;
			    var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) +
			    Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
			    s = s *6378.137 ;// EARTH_RADIUS;
			    s = Math.round(s * 10000) / 10000;
			    return s * 1000;
			},
			/**
			 * 火星坐标系 (GCJ-02) 转百度坐标系 (BD-09) 
			 * @param {Object} lng 经度
			 * @param {Object} lat 纬度
			 */
			gcj02tobd09(lng, lat) {
			    var z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * x_PI);
			    var theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * x_PI);
			    var bd_lng = z * Math.cos(theta) + 0.0065;
			    var bd_lat = z * Math.sin(theta) + 0.006;
				return {
					longitude: bd_lng,
					latitude: bd_lat
				}
			},
			/**
			 * WGS-84转GCJ-02
			 * @param {Object} lng 经度
			 * @param {Object} lat 纬度
			 */
			wgs84togcj02(lng, lat) {
				var dlat = this.transformlat(lng - 105.0, lat - 35.0);
				var dlng = this.transformlng(lng - 105.0, lat - 35.0);
				var radlat = lat / 180.0 * PI;
				var magic = Math.sin(radlat);
				magic = 1 - ee * magic * magic;
				var sqrtmagic = Math.sqrt(magic);
				dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
				dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
				var mglat = lat + dlat;
				var mglng = lng + dlng;
				return {
					longitude: mglng,
					latitude: mglat
				}
			},
			transformlat(lng, lat) {
			    var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));
			    ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
			    ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0;
			    ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0;
			    return ret
			},
			transformlng(lng, lat) {
			    var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
			    ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
			    ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0;
			    ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0;
			    return ret
			},
		}
	}
</script>

<style lang="scss">
	.dk-card1 {
		margin: 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 20rpx;
		position: relative;
		transform-style: preserve-3d;
		transition: 1s;
		
		&-user {
			height: 150rpx;
			display: flex;
			align-items: center;
			padding: 20rpx;
			box-sizing: border-box;
			
			&__avator {
				width: 100rpx;
				height: 100rpx;
				font-size: 30rpx;
				color: #fff;
				text-align: center;
				line-height: 100rpx;
				border-radius: 10rpx;
				background-color: #1989fa;
				margin-right: 20rpx;
				
				image {
					width: 100%;
					height: 100%;
				}
			}
			
			&__info {
				
				&-top {
					font-size: 33rpx;
				}
				
				&-bottom {
					font-size: 25rpx;
					color: #aaa;
				}
			}
		}
	}
	
	.show-back {
		transform: rotateY(180deg);
	}
	
	.show-front {
		transform: rotateY(0);
	}
	
	.dk-card {
		margin: 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 20rpx;
		position: relative;
		height: calc(100vh - 510rpx);
		perspective: 1500px;
		-webkit-perspective: 1500px;
		-moz-perspective: 1500px;
		
		&-box {
			backface-visibility: hidden;
			transition: all 1s;
		}
		
		&-front {
			height: 100%;
			width: 100%;
			border-radius: 20rpx;
			position: absolute;
			background-color: #fff;
			left: 0;
			top: 0;
			
			&__head {
				display: flex;
				padding: 20rpx 20rpx;
				box-sizing: border-box;
				height: 150rpx;
				
				&--item {
					width: 250rpx;
					margin: 0 auto;
					background-color: #eee;
					border-radius: 10rpx;
					padding: 10rpx 20rpx;
					
					&-top {
						font-size: 28rpx;
					}
					
					&-bottom {
						font-size: 25rpx;
						color: #aaa;
						display: flex;
						
						&-icon {
							width: 30rpx;
							height: 30rpx;
							margin-right: 10rpx;
							margin-top: 5rpx;
							
							image {
								width: 100%;
								height: 100%;
							}
						}
					}
				}
			}
			
			&__body {
				height: calc(100% - 150rpx);
				position: relative; 
				box-sizing: border-box;
				
				&--btn {
					position: absolute;
					left: 50%;
					top: 46%;
					transform: translate(-50%,-50%);
					width: 300rpx;
					height: 300rpx;
					border-radius: 50%;
					// background-image: linear-gradient(to bottom, #02A1FD 0%,#028BFD 100%);
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					box-shadow: 0 0 30rpx 3rpx rgba(157,187,220,.6);
					
					&-box {
						text-align: center;
						
						&-icon {
							width: 60rpx;
							height: 60rpx;
							margin: 0 auto;
							opacity: .6;
							
							image{
								width: 100%;
								height: 100%;
							}
						}
						
						&-top {
							font-size: 40rpx;
						}
						
						&-bottom {
							font-size: 30rpx;
							color: #eee;
							opacity: .6;
						}
					}
				}
				
				&--des {
					position: absolute;
					left: 50%;
					bottom: 100rpx;
					width: 100%;
					transform: translateX(-50%);
					display: flex;
					justify-content: center;
					color: #aaa;
					padding: 0 20rpx;
					box-sizing: border-box; 
					
					&-icon {
						width: 30rpx;
						height: 30rpx;
						margin-right: 10rpx;
						margin-top: 5rpx;
						
						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
		
		&-back {
			height: 100%;
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
			transform: rotateY(-180deg); 
			
			&__head {
				height: 120rpx;
				
				&-text {
					font-size: 40rpx;
					font-weight: bold;
				}
				
				&-time {
					font-size: 27rpx;
				}
			}
			
			&__img {
				height: calc(100% - 240rpx);
				display: flex;
				justify-content: center;
				align-items: center;
				
				image {
					width: 40%;
					height: 40%;
				}
			}
			
			&__des {
				height: 100rpx;
				font-size: 25rpx;
				text-align: center;
				line-height: 100rpx;
			}
			
			&__cancel {
				position: absolute;
				right: 30rpx;
				top: 30rpx;
				width: 40rpx;
				height: 40rpx;
				
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		
	}
	
	.dk-bottom {
		position: absolute;
		bottom: 104rpx;
		left: 0;
		width: 100%;
		height: 100rpx;
		z-index: 9999;
		background-color: #fff;
		border-top: 1rpx solid #eee;
		border-bottom: 1rpx solid #eee;
		box-shadow: 0 -5rpx 5rpx 1rpx rgba(132, 132, 132, 0.1);
		
		&-tip {
			height: 100%;
			padding: 0 20rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			
			&-icon {
				width: 60rpx;
				height: 100%;
				display: flex;
				align-items: center;
				margin-right: 20rpx;
				
				image {
					width: 60rpx;
					height: 60rpx;
				}
			}
			
			&-text {
				font-size: 30rpx;
			}
		}
		
	}
	
	.dk-title {
		font-size: 55rpx;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.nav-title {
		width: 100%;
		font-size: 25rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.nav-title-icon > image {
		width: 20rpx;
		height: 20rpx;
		margin-left: 10rpx;
	}
	
	.nav-right {
		width: 50rpx;
		height: 50rpx;
		font-size: 25rpx;
		background-color: #6AD7F8;
		border-radius: 50%;
		text-align: center;
		line-height: 50rpx;
		color: #fff;
	}
	
	.swiper {
		height: 700rpx;
	}
	
	.card {
		margin: 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 20rpx;
	}
	
	.content__des {
		font-size: 20rpx;
		color: #aaa;
		margin-top: 20rpx;
	}
	
	.morning,.afternoon {
		position: relative;
		padding-left: 60rpx;
		margin-top: 20rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
	}
	
	.morning > view,.afternoon > view {
		float: left;
		margin-right: 20rpx;
	}
	
	.morning:before,.afternoon::after {
		content: '';
		display: block;
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background-color: #aaa;
		position: absolute;
		left: 10rpx;
		top: 50%;
		transform: translateY(-50%);
		clear: both;
	}
	
	.line {
		position: absolute;
		width: 6rpx;
		height: 90rpx;
		background-color: #dddddd;
		left: 17rpx;
		top: 65rpx;
	}
	
	.no-work {
		height: 200rpx;
		text-align: center;
		font-size: 30rpx;
		line-height: 200rpx;
	}
	
	.card__head {
		padding: 0 20rpx;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-weight: bold;
	}
	
	.card__content {
		display: flex;
		justify-content: space-around;
		height: 150rpx;
		align-items: center;
		text-align: center;
	}
	
	.card__content--val {
		font-size: 40rpx;
		font-weight: bold;
		height: 70rpx;
	}
	
	.card__content--des {
		font-size: 25rpx;
		color: #aaa;
	}
	
	.right-btn {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		color: #2979ff;
	}
	
	.current-place {
		text-align: center;
	}
	
	.tip__card {
		padding: 20rpx;
		border-radius: 10rpx;
		background-color: #eee;
		margin-bottom: 20rpx;
		
		&--list {
			display: flex;
			align-items: center;
			
			&-dot {
				width: 10rpx;
				height: 10rpx;
				border-radius: 50%;
				margin-right: 10rpx;
			}
			
			&-text {
				font-size: 20rpx;
				color: #999;
			}
		}
	}
	
	.attend-card {
		padding: 20rpx;
		border: 2rpx solid #eee;
		border-radius: 15rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 10rpx 0;
	}
</style>
<style scoped>
	/deep/ .custom-nav-bar .uni-status-bar,
	/deep/ .custom-nav-bar .uni-navbar__header {
		background: linear-gradient(to right, #6AD7F8,#10AADC);
	}
	
	/deep/ .uni-navbar__header-container  {
		display: flex;
		justify-content: center;
	}
</style>
